<template>
  <div class="top">
    <!-- 背景上传 -->
    <div class="bg" :style="{ backgroundImage: `url(${info.userBg})` }">
      <van-uploader :after-read="afterRead" />
    </div>

    <div class="userInfo">
      <!-- 头像 -->
      <div class="tx-nc">
        <div class="tx" :style="{ backgroundImage: `url(${info.userImg})` }">
          <!-- <img :src="info.userImg"  alt="" style="width: 75px;height: 75px;margin-top: 10px; border-radius: 50px;"> -->
          <van-uploader :after-read="afterRead1" />
        </div>
        <div class="nc">
          <div style="color: #0c34ba; font-size: 18px;">{{ info.nickName }}</div>
          <div>{{ info.desc }}</div>
        </div>
      </div>

      <!-- 列表 -->
      <div class="list">
        <ul class="list-item">
          <!-- <div class="list-item" @click="view(a.cc)" v-for="(a,b) in list"> -->
          <!-- <div class="left"> -->
          <!-- {{ a.title }} -->
          <!-- </div> -->
          <!-- 定位调 -->
          <!-- <div class="right" style="padding-right: 25px;">&gt</div> -->
          <!-- </div> -->
          <li class="item1" @click="togo('/Account')">
            <span>个人资料</span>
            <div class="right" style="padding-right: 40px;">&gt</div>
          </li>
          <li class="item1" @click="togo('/MyOrder')">
            <span>我的订单</span>
            <div class="right" style="padding-right: 40px;">&gt</div>
          </li>
          <li class="item1" @click="togo('/Like')">
            <span>我的收藏</span>
            <div class="right" style="padding-right: 40px;">&gt</div>
          </li>
          <li class="item1" @click="togo('/Add')">
            <span>地址管理</span>
            <div class="right" style="padding-right: 40px;">&gt</div>
          </li>
          <li class="item1" @click="togo('/Secure')">
            <span>安全中心</span>
            <div class="right" style="padding-right: 40px;">&gt</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
  
<script>
import { post, get } from '../request'
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default {
  setup() {

    const router = useRouter()
    const route = useRoute()
    //跳转列表
    const list = ref([
      {
        title: '个人资料',
        tos: { name: "/Account" },

      },
      {
        title: '我的订单',
        tos: { name: "/MyOrder" }
      },
      {
        title: '我的收藏',
        tos: { name: "/Like" }
      },
      {
        title: '地址管理',
        tos: { name: "/Address" }
      },
      {
        title: '安全中心',
        tos: { name: "/Secure" }
      }
    ])
    //点击跳转
    const view = (a) => {
      router.push({ name: tos })
      console.log("a" + a)
    }


    //判断用户是否登录
    const tk = ref(JSON.parse(localStorage.getItem('tokens')))
    console.log("tk", tk.value);
    const demo = () => {
      //用户没有登录
      if (!tk.value == null) {

      }
    }

    //上传背景
    const afterRead = async (e) => {
      //此时可以自行将文件上传至服务器
      const imgType = e.file.name.split('.')[1]
      const serverBase64Img = e.content.replace(/^data:image\/[A-Za-z]+;base64,/, '')
      const res = await post('/updateUserBg', {
        tokenString: JSON.parse(localStorage.getItem('tokens')),
        imgType,
        serverBase64Img
      })
      console.log("背景上传", res);
      userInfo()
    };
    //上传头像
    const afterRead1 = async (e) => {
      //此时可以自行将文件上传至服务器
      const imgType = e.file.name.split('.')[1]
      const serverBase64Img = e.content.replace(/^data:image\/[A-Za-z]+;base64,/, '')
      const res = await post('/updateAvatar', {
        tokenString: JSON.parse(localStorage.getItem('tokens')),
        imgType,
        serverBase64Img
      })
      console.log("头像上传", res);
      userInfo()
    };
    //存放个人信息
    const info = ref({})
    //获取个人信息
    const userInfo = async () => {
      const res = await get('/findMy', {
        params: {
          tokenString: JSON.parse(localStorage.getItem('tokens'))
        }
      })
      // res.data.result[0].desc = 'asdfgh'
      info.value = res.data.result[0]
      console.log("个人信息", res);
    }
    userInfo()
    // 1、路由跳转
    const togo = (path) => {
      router.push(path)
    }
    return {
      afterRead,
      afterRead1,
      info,
      list,
      view,
      demo,
      togo
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.div .top {
  margin-bottom: -150px;
}

.list {
  margin-top: 30px;
  width: 100%;
  padding-left: 15px;
  //.list-item{
  // margin-bottom: -100px;

  //   padding: 5px;
  //   line-height: 40px;
  //   display: flex;
  //   width: 100%;
  //   align-items: center;
  //   justify-content: space-between;
  //   border-bottom: 1px solid #e8e8e8;

  //   &:nth-last-child(1){
  //     border: none;
  //   }
  //}
  .item1 {
    padding: 5px;
    line-height: 40px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e8e8e8;
    font-size: 14px;

    &:nth-last-child(1) {
      border: none;
    }
  }

}

.userInfo {
  border-radius: 18px;
  position: relative;
  top: -30px;
  left: 0;
  width: 95%;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.85);

  .tx-nc {
    padding-left: 15px;
    display: flex;
    width: 100%;
  }

  .tx {
    width: 75px;
    height: 75px;
    margin-top: 10px;
    border-radius: 50px;
    background-size: cover;
    background-position: center;
  }

  .nc {
    flex: 1;
    line-height: 35px;
    margin-top: 10px;
    margin-left: 15px;
    font-size: 15px;
  }
}

/deep/.van-uploader__upload {
  width: 100px !important;
  height: 50px !important;
  opacity: 0;
  overflow: hidden;
}

.bg {
  height: 240px;
  background-size: cover;
  background-repeat: no-repeat;

}</style>
  